\section{HTML常用元素}

HTML5中定义的元素共有100多个，\cite{W3C，2015}。常见的元素有段落元素p、标题元素h1、图片元素img等等20个左右。明白每个元素的用途才能恰当使用元素，比如，文章的标题就可以用h1-h6元素，文章中内容的段落就得放在段落p中，在文章中有想强调的文本，就可以使用 em 标签表示强调等等。恰当地使用元素标记内容，就是所谓的语义化，语义化编码描述了页面中内容的含义，而不是内容的表现形式，例如下面的代码：

\begin{lstlisting}
<font size="6"><b>这是一个标题</b></font>
\end{lstlisting}

虽然上面的代码显示的效果和标题的效果没有区别，但是从语义上来说，上面的代码应该这样写：

\begin{lstlisting}
<h1>This is a heading</h1>
\end{lstlisting}

语义化的好处是网页内容结构清晰，这样更容易被搜索引擎收录，也使其他程序，如屏幕阅读器，更容易理解文章内容，还有，语义化的HTML文档更容易管理，其内部结构也更为清晰。\cite{Boag-2005}

\subsection{根元素}
html元素是HTML文档的根元素，其他所有元素都是html元素的后代。

最好通过lang属性为html指定特定的语言，以方便翻译工具、语音朗读工具确定合适的规则。

\begin{lstlisting}
<!DOCTYPE html>
<html lang="en">
  <head>
  <title>Swapping Songs</title>
  </head>
  <body>
    <h1>Swapping Songs</h1>
    <p>Tonight I swapped some of the songs I wrote with some friends, who
    gave me some of the songs they wrote. I love sharing my music.</p>
  </body>
</html>
\end{lstlisting}

\subsection{文档元数据相关元素}
\subsubsection{head}
head元素是html元素的第一个子元素，用来标记HTML文档的一系列元数据（如文档标题、作者、关键词、相关样式表、相关脚本等等）。
\begin{lstlisting}
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
 </head>
 <body>
 ...
\end{lstlisting}

\subsubsection{title}
title元素位于head元素之中，用来标记整个HTML文档的标题或名称，title元素不得重复出现。

\subsubsection{base}
base元素位于head元素之中，通过href属性设定文档基准URL、通过target属性设定文档中所有超级链接的默认打开方式。
如：
\begin{lstlisting}[label={base-href}]
<!DOCTYPE html>
<html>
    <head>
        <title>This is an example for the &lt;base&gt; element</title>
        <base href="http://www.example.com/news/index.html">
    </head>
    <body>
        <p>Visit the <a href="archives.html">archives</a>.</p>
    </body>
</html>
\end{lstlisting}
上例\ref{base-href}中base元素href的值必须为绝对地址。p元素中的超级链接最终实际地址为：
\begin{lstlisting}
 "http://www.example.com/news/archives.html"
\end{lstlisting}
以下代码将使得网页中超级链接的打开方式设定为新建窗口打开：

\lstinputlisting[emph={base,target},emphstyle=\bfseries]{example/HTML5/base.html}

上例中的第一个超级链接将在新建窗口打开，第二个超级链接将在自身窗口打开。

\subsubsection{link}
link元素位于head元素中，用来连接和当前文档相关的外部资源。link元素必须指定rel属性。如：
\begin{lstlisting}
<link rel="stylesheet" href="main.css" type="text/css">
\end{lstlisting}

\subsubsection{meta}
meta元素用来标记不能被title、base、link、style和script元素标记的其他各种元数据，如网页关键词、版权信息、页面编码信息等等，最常见的是通过meta元素设定页面的编码信息：

\begin{lstlisting}
<meta charset="UTF-8">
\end{lstlisting}

\begin{myremark}{理解字符编码}
字符编码是一项极为复杂的主题，字符编码指示文件将显示什么字符，在选择一种字符编码之前，必须确保所使用的文本编辑器能够使用这种编码方式保存文档（Sunlime Text编辑器的默认编码方式就是UTF-8）。Unicode是一种表示所有字母和符号的可靠方式，Unicode目前支持超过99000个字符！
\end{myremark}

meta元素除了拥有全局性属性外，还可设定name、http-equiv、content值。

\lstinputlisting[emph={meta},emphstyle=\bfseries]{example/HTML5/meta.html}

\subsubsection{style}
style元素是head元素的子元素，用来设定HTML文档的内部样式表。
\begin{lstlisting}[emph={style},emphstyle=\bfseries]
<!DOCTYPE html>
<html lang="en-US">
 <head>
  <title>My favorite book</title>
  <style>
   body { color: black; background: white; }
  </style>
 </head>
 <body>
  <p>My <em>favorite</em> book of all time has <em>got</em> to be
  <cite>A Cat's Life</cite>. It is a book by P. Rahmel that talks
  about the <i lang="la">Felis Catus</i> in modern human society.</p>
 </body>
</html>
\end{lstlisting}

\subsection{块元素与行内元素} % (fold)
\label{sub:块元素与行内元素}
绝大多数HTML元素是块元素（Block-level element）或者行内元素（Inline-level element）。这两者之间有什么不同？

块元素开始于新的一行，占据指定的宽度。块元素还可以嵌套块元素，还可以在内部使用行内元素。最常见的块元素就是段落<p>、<div>等等。

行内元素并不会开始于新的一行。它们按照字符的顺序依次再文档中显示，如从左到右，一个挨着一个，填满所在容器的宽度后才会换行。行内元素也可以嵌套使用，但是行内元素内部不能包含块元素。常见的行内元素有<a>、<img>等等。
% subsection 块元素与行内元素 (end)
\subsection{区域元素}

\subsubsection{body}
Body元素用来标记全部文档内容。在HTML文档中，应该只能有一个body元素。

\subsubsection{article}
article元素表示网页中完整的信息，比如论坛中的帖子、报纸中的报道、博客文章、用户评论或者其他独立完整的内容。

\subsubsection{section}
section元素表示文档或者应用中一般意义上的分区，比如二级标题及段落的组合，就是一个分区。

\begin{lstlisting}
<section>
  <h3>Red Delicious</h3>
  <p>These bright red apples are the most common found in many
  supermarkets.</p>
 </section>
 <section>
  <h3>Granny Smith</h3>
  <p>These juicy, green apples make a great filling for
  apple pies.</p>
 </section>
\end{lstlisting}

\subsubsection{nav}
nav元素用来表示一组连接到外部网页的链接，即导航条。

\begin{lstlisting}
<nav>
   <h1>Navigation</h1>
   <ul>
    <li><a href="articles.html">Index of all articles</a></li>
    <li><a href="today.html">Things sheeple need to wake up for today</a></li>
    <li><a href="successes.html">Sheeple we have managed to wake</a></li>
   </ul>
</nav>
\end{lstlisting}

\subsubsection{aside}
Aside 元素用来表示和当前文档内容相关的区块，比如广告、相关链接以及其他和当前文档相关的内容。
\subsubsection{h1,h2,...h6}
这些元素用来标记对应区块的标题，其中h1为最高级别，h6为最低级别的子标题。
合理使用标题元素，也有利于搜索引擎对页面内容的理解。
\subsubsection{header}
header元素不同于head元素，header用来标记文档的简介或者导航区域。
\subsubsection{footer}
footer元素通常包括版权信息、相关文档、机构简介等等内容。
\subsubsection{address}
address元素用来表示联系方式。

\begin{lstlisting}
<footer>
 <address>
  要了解更多信息，请联系<a href="mailto:js@example.com">作者</a>.
 </address>
 <p><small>&copy; copyright 2038 Example Corp.</small></p>
</footer>
\end{lstlisting}

\begin{myremark}{HTML转义字符}
HTML中,大于号>、小于号<、引号"等一些字符，是有特殊意义的，比如HTML的标签就是以<开始，以>结束，如果直接使用，容易引起歧义。因此，HTML中提供了输出特殊字符的机制，使用\code{\&}字符开始，以\code{;}结束，可以用来输出特殊字符，例如：\code{\&gt;}将输出字符">",\code{\&copy;}将输出字符©。在\code{\&}字符和\code{;}之间，可以是名词或者数字编码。例如：\code{\&\#34;}
表示引号。完整的HTML转义字符列表参见\href{http://tool.oschina.net/commons?type=2}{http://tool.oschina.net/commons?type=2}。
\end{myremark}

\subsection{内容组织元素}
\subsubsection{p} % (fold)
\label{ssub:p}
p元素用来表示段落，列表元素ol和ul不能包含于p元素中。
% subsubsection p (end)
\subsubsection{hr} % (fold)
\label{ssub:hr}
hr元素表示段落级别的语义中断，例如，一个故事中的场景切换，或者文章中的主题切换。
% subsubsection hr (end)
\subsubsection{pre} % (fold)
\label{ssub:pre}
Pre元素表示预定义格式的文本块，常用来标记诗歌、代码等等内容。
% subsubsection pre (end)
\subsubsection{blockquote} % (fold)
\label{ssub:blockquote}
Blockquote元素表示从别处引用的内容。
% subsubsection blockquote (end)
\subsubsection{ol} % (fold)
\label{ssub:ol}
Ol 元素表示一组有序列表，所谓有序列表，就是列表项目的顺序是有意义的，如菜谱中的工序。列表项目使用li元素标记。
% subsubsection ol (end)
\subsubsection{ul} % (fold)
\label{ssub:ul}
Ul 元素表示一组无序列表，所谓无序，就是列表的顺序可以随意改变，列表项目使用li元素标记。
% subsubsection ul (end)
\subsubsection{li} % (fold)
\label{ssub:li}
Li元素表示列表中的项目。
% subsubsection li (end)
\subsubsection{dl} % (fold)
\label{ssub:dl}
Dl元素表示一组包含“名称-值”的自定义列表，其中名称使用dt标记，值可以是一个或者多个dd元素。

\begin{lstlisting}
<dl>
 <dt> 作者 </dt>
 <dd> Adam </dd>
 <dd> Cui </dd>
 <dt> 编辑 </dt>
 <dd> Fang </dd>
</dl>
\end{lstlisting}

% subsubsection dl (end)
\subsubsection{dt} % (fold)
\label{ssub:dt}
Dt 元素用来表示自定义列表dl中的名称、术语。
% subsubsection dt (end)
\subsubsection{dd} % (fold)
\label{ssub:dd}
Dd 元素用来表示自定义列表dl中名称dt的解释、定义或者值。
% subsubsection dd (end)
\subsubsection{figure} % (fold)
\label{ssub:figure}
Figure 元素用来表示对插图、图表、照片、代码块等内容的引用。

\begin{lstlisting}
<figure>
 <img src="bubbles-work.jpeg">
 <figcaption>图片标题</figcaption>
</figure>
\end{lstlisting}

% subsubsection figure (end)
\subsubsection{figcaption} % (fold)
\label{ssub:figcaption}
Figcaption元素用来表示figure元素中的标题。
% subsubsection figcaption (end)
\subsubsection{div} % (fold)
\label{ssub:div}
Div元素本身并没有特殊含义，它是HTML中用来标记内容结构的最常用元素，用来将相关的元素组织在一起，形成逻辑上的整体。
% subsubsection div (end)
\subsubsection{main} % (fold)
\label{ssub:main}
Main元素表示文档或者应用的最重要或者核心部分。main元素可与header、footer一起标记网页的内容。

main元素不要放在article、 aside、 footer、 header、或者 nav元素中。

\begin{lstlisting}
<!DOCTYPE html>
  <html>
  <head>
    <title>………………</title>
  </head>
  <body>

  <header>
  <nav>
  <ul>
  <li>……</li>
  <li>……</li>
  <li>……</li>
  </ul>
  </nav>
  </header>

  <main>
  …………
  …………
  …………
  </main>

  <footer>…………</footer>

  </body>
  </html>
\end{lstlisting}

% subsubsection main (end)

\subsection{文本语义元素}
\subsubsection{a} % (fold)
\label{ssub:a}
A 元素用来表示超链接或者文档内部锚点。如果a元素有href属性，它就表示超链接。

当a 元素表示超链接时，可以使用target属性指定链接打开方式，如：

\begin{lstlisting}
<a href="http://www.baidu.com" target="_blank">百度</a>
\end{lstlisting}

之前在\ref{sub:块元素与行内元素}我们提到，行内元素不能包含块元素，但是a元素是个例外，a元素内部可以是文字、图片等行内元素，也可以是段落、标题等块内容。

\begin{myremark}{相对路径与绝对路径}
链接通常可以分为两类：指向本站内部的链接和指向外部站点的链接。这些链接通过a元素的href属性来指定。我们常使用相对路径来指定网站内部的链接，相对路径中不包含域名（如.com，.org， .edu，等等）信息，因为链接指向的网页位于同一站点，因此href属性的值只需要包含网页文件所在的路径和文件名即可，如:\code{<a href="about.html">About</a>}；指向外部站点页面的链接必须使用绝对路径，绝对路径包含完整的URL信息。通常是以http开头，包含主机域名以及文件路径和文件名称。如\code{<a href="http://www.google.com/">Google</a>}
\end{myremark}

a元素还可以通过在href属性中添加\code{\#}创建指向文档内部具体位置的超级链接，如：

\begin{lstlisting}
<body id="top">
  ...
  <a href="#top">Back to top</a>
  ...
</body>
\end{lstlisting}

上述代码将创建一个返回到body开始位置的超级链接，实现返回到页首的效果。
% subsubsection a (end)
\subsubsection{em} % (fold)
\label{ssub:em}
Em 元素表示对其标记内容的强调，在语义上强调与其他内容的不同。
% subsubsection em (end)

\subsubsection{strong} % (fold)
\label{ssub:strong}
Strong元素用来表示其标记内容非常重要、非常紧急，在语义上表示重要性。
% subsubsection strong (end)

\subsubsection{small} % (fold)
\label{ssub:small}
Small 元素表示诸如注释、说明等等不同于正文的内容。

\begin{lstlisting}
<dl>
<dt>标准间</dt>
<dd>199元。<small>不含早餐</small></dd>
<dd>229元。<small>含双早</small></dd>
</dl>
\end{lstlisting}
% subsubsection small (end)

\subsubsection{s} % (fold)
\label{ssub:s}
S 元素用来标记不再准确或者已不相关的内容。

\begin{lstlisting}
<dl>
<dt>标准间</dt>
<dd><s>199元。<small>不含早餐</small></s></dd>
<dd>189元。<small>含早餐</small></dd>
</dl>
\end{lstlisting}
% subsubsection s (end)

\subsubsection{cite} % (fold)
\label{ssub:cite}
Cite用来表示对作品（如书籍、电影、歌曲、新闻等等）的引用，cite中的内容必须包含作品名称或者作者名称或者URL地址。

\begin{lstlisting}
<cite><a href="http://world.people.com.cn/n1/2016/0106/c1002-28019941.html">聚焦朝鲜的历次核试验</a>. 人民网. </cite>
\end{lstlisting}
% subsubsection cite (end)

\subsubsection{q} % (fold)
\label{ssub:q}
Q 元素表示对外部资料的直接引用。

\begin{lstlisting}
<p>那个男人说<q>事情不能再拖了</q>。我也赞同他的观点。</p>
\end{lstlisting}

可以使用cite属性来指定外部资料的来源，如：

\begin{lstlisting}
<p>万维网联盟在其 <cite>About W3C</cite> 页面中表明，它的使命是 <q cite="http://www.w3.org/Consortium/">通过制定协议和规范，引导万维网发挥其全部潜力，确保万维网的长期发展。</q>. </p>
\end{lstlisting}
% subsubsection q (end)

\subsubsection{dfn} % (fold)
\label{ssub:dfn}
dfn元素用来表示术语的定义。如：

\begin{lstlisting}
<p>doit.im是一款<dfn><abbr title="Get Thing Done">GTD</abbr></dfn>软件，用来帮助用户进行任务管理。</p>
\end{lstlisting}
% subsubsection dfn (end)

\subsubsection{abbr} % (fold)
\label{ssub:abbr}
Abbr 元素表示某个术语的缩写。使用title属性来指定术语的全部名称。
% subsubsection abbr (end)

\subsubsection{data} % (fold)
\label{ssub:data}
Data 元素用来标记数据。
% subsubsection data (end)

\subsubsection{time} % (fold)
\label{ssub:time}
Time 元素用来标记时间。
% subsubsection time (end)

\subsubsection{code} % (fold)
\label{ssub:code}
Code 元素用来标记代码。
% subsubsection code (end)

\subsubsection{var} % (fold)
\label{ssub:var}
Var 元素用来标记变量。
% subsubsection var (end)

\subsubsection{samp} % (fold)
\label{ssub:samp}
Samp 元素用来标记程序或者计算机的输出结果。
% subsubsection samp (end)

\subsubsection{kbd} % (fold)
\label{ssub:kbd}
Kbd 元素用来标记用户输入的内容，尤其是键盘输入。

\begin{lstlisting}
使用快捷键<kbd>Ctrl + S </kdb>保存文档。
\end{lstlisting}
% subsubsection kbd (end)

\subsubsection{sub和sup} % (fold)
\label{ssub:sub和sup}
Sub 表示下标，sup表示上标。
% subsubsection sub和sup (end)

\subsubsection{i} % (fold)
\label{ssub:i}
I 元素表示不同于正文的可替换声音、情绪或其他语言的内容等等。
% subsubsection i (end)

\subsubsection{b} % (fold)
\label{ssub:b}
B 元素用来表示诸如关键字、产品名称等等需要引起注意的内容。
% subsubsection b (end)

\subsubsection{u} % (fold)
\label{ssub:u}
U 元素用来标记不能非常清楚表达的内容，如汉语诗歌等。
% subsubsection u (end)

\subsubsection{mark} % (fold)
\label{ssub:mark}
Mark 元素用来标记高亮内容，以表示其与其他内容的区别。
% subsubsection mark (end)

\subsubsection{ruby} % (fold)
\label{ssub:ruby}
Ruby 元素用来为东亚字符添加注音。
% subsubsection ruby (end)

\subsubsection{span} % (fold)
\label{ssub:span}
Span 元素用来在逻辑结构上对文本内容进行区分，比如在新闻信息中，我们可以将日期、作者信息、消息来源等内容，用span元素加以标记，结合class属性，进行文本区分。
% subsubsection span (end)

\subsubsection{br} % (fold)
\label{ssub:br}
Br 元素表示另起一行。
% subsubsection br (end)

\subsubsection{ins} % (fold)
\label{ssub:ins}
Ins 元素表示文档的追加内容。datetime属性用来说明追加内容的时间。
% subsubsection ins (end)

\subsubsection{del} % (fold)
\label{ssub:del}
Del 元素表示文档中的移除内容。datetime属性用来说明移除内容的时间。

\begin{lstlisting}
<h1>To Do</h1>
<ul>
 <li>Empty the dishwasher</li>
 <li><ins datetime="2009-10-11T01:25-07:00">Watch Walter Lewin's lectures</ins></li>
 <li><del datetime="2009-10-10T23:38-07:00">Download more tracks</del></li>
 <li>Buy a printer</li>
</ul>
\end{lstlisting}

% subsubsection del (end)

\subsection{嵌入内容元素}
\subsubsection{img} % (fold)
\label{ssub:img}
Img 元素用来在文档中插入图片。src属性用来指定图片来源，alt属性用来说明图片内容。
% subsubsection img (end)

\subsubsection{iframe} % (fold)
\label{ssub:iframe}
Iframe 元素生成内嵌框架，引用另外一个网页的内容。src属性用来指定内嵌网页的地址。

\begin{lstlisting}
<iframe src="http://ads.example.com/" width="468" height="60"></iframe>
\end{lstlisting}
% subsubsection iframe (end)

\subsubsection{embed} % (fold)
\label{ssub:embed}
Embed 元素用来嵌入外部非HTML文档内容，比如flash。
% subsubsection embed (end)

\subsubsection{object} % (fold)
\label{ssub:object}
Object 元素用来嵌入外部对象，插入的对象视为图片元素。
% subsubsection object (end)

\subsubsection{video} % (fold)
\label{ssub:video}
Video 元素用来插入视频文件。通过src, preload, autoplay, mediagroup, loop, muted, 以及 controls 属性控制视频内容及播放方式。
% subsubsection video (end)

\subsubsection{audio} % (fold)
\label{ssub:audio}
Audio 元素用来插入音频文件。音频文件的播放控制通过属性src, preload, autoplay, mediagroup, loop, muted, 以及 controls 进行设置。
% subsubsection audio (end)

\subsubsection{source} % (fold)
\label{ssub:source}
Source 元素的src属性指定媒体文件的来源。

\begin{lstlisting}
<video controls autoplay>
 <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>
 ...
</video>
\end{lstlisting}
% subsubsection source (end)

\subsubsection{track} % (fold)
\label{ssub:track}
Track 元素为媒体文件提供基于时间线的文本信息，如不同语言的字幕。

\begin{lstlisting}
<video src="brave.webm">
 <track kind=subtitles src=brave.en.vtt srclang=en label="English">
 <track kind=captions src=brave.en.hoh.vtt srclang=en label="English for the Hard of Hearing">
 <track kind=subtitles src=brave.fr.vtt srclang=fr lang=fr label="Français">
 <track kind=subtitles src=brave.de.vtt srclang=de lang=de label="Deutsch">
</video>
\end{lstlisting}

% subsubsection track (end)

\subsubsection{map} % (fold)
\label{ssub:map}
Map 元素将图片和区域组合起来形成地图。

\begin{lstlisting}
<IMG SRC="/images/menu.gif" USEMAP="#NAV">
<MAP NAME="NAV">
  <P>
   <A HREF="/clothes/">Clothes</A>
   <AREA ALT="Clothes" COORDS="0,0,100,50" HREF="/clothes/"> |
   <A HREF="/toys/">Toys</A>
   <AREA ALT="Toys" COORDS="0,0,100,50" HREF="/toys/"> |
   <A HREF="/food/">Food</A>
   <AREA ALT="Food" COORDS="0,0,100,50" HREF="/food/"> |
   <A HREF="/books/">Books</A>
   <AREA ALT="Books" COORDS="0,0,100,50" HREF="/books/">
</MAP>
\end{lstlisting}
% subsubsection map (end)

\subsubsection{area} % (fold)
\label{ssub:area}
Area 元素为图片的指定区域添加超级链接。
% subsubsection area (end)

\subsubsection{math} % (fold)
\label{ssub:math}
Math 元素用来在HTML文档中插入数学公式。
% subsubsection math (end)

\subsubsection{svg} % (fold)
\label{ssub:svg}
Svg 元素用来嵌入svg格式图片。
% subsubsection svg (end)
\subsection{表格元素}

\subsubsection{table} % (fold)
\label{ssub:table}
Table 元素用来生成表格。表格拥有行、列。
% subsubsection table (end)

\subsubsection{caption} % (fold)
\label{ssub:caption}
Caption 元素为表格元素添加标题或者说明信息，caption应该包含在table元素中。

\begin{lstlisting}
<caption>
<p>表1.</p>
<p>表格说明文字。</p>
</caption>
\end{lstlisting}
% subsubsection caption (end)

\subsubsection{tbody} % (fold)
\label{ssub:tbody}
Tbody 元素用来标记表格主体。
% subsubsection tbody (end)

\subsubsection{thead} % (fold)
\label{ssub:thead}
thead 元素用来标记表格的表头。
% subsubsection thead (end)

\subsubsection{tfoot} % (fold)
\label{ssub:tfoot}
Tfoot 元素用来标记表格的脚部，通常都是合计之类的信息。
% subsubsection tfoot (end)

\subsubsection{tr} % (fold)
\label{ssub:tr}
Tr 元素用来标记表格的行。
% subsubsection tr (end)

\subsubsection{td} % (fold)
\label{ssub:td}
Td 元素用来标记表格的单元格。
% subsubsection td (end)

\subsubsection{th} % (fold)
\label{ssub:th}
Th 元素表示表头的单元格。
% subsubsection th (end)

\begin{lstlisting}
<table>
   <caption>表格说明文字</caption>
 <thead>
  <tr> <th> ID <th> Measurement <th> Average <th> Maximum
 <tbody>
  <tr> <td> <th scope=rowgroup> Cats <td> <td>
  <tr> <td> 93 <th scope=row> Legs <td> 3.5 <td> 4
  <tr> <td> 10 <th scope=row> Tails <td> 1 <td> 1
 </tbody>
 <tbody>
  <tr> <td> <th scope=rowgroup> English speakers <td> <td>
  <tr> <td> 32 <th scope=row> Legs <td> 2.67 <td> 4
  <tr> <td> 35 <th scope=row> Tails <td> 0.33 <td> 1
 </tbody>
</table>
\end{lstlisting}

\subsection{表单元素}

\subsubsection{form} % (fold)
\label{ssub:form}
Form元素用来标记一组和表单相关的元素，如文本框、提交按钮等等内容，是服务器和用户进行交互的最重要元素。

form 元素最重要的两个属性是action和method，分别对应表单提交后的处理程序和表单提交方式。

\begin{lstlisting}
<form action="http://www.bing.com/search" method="get">
 <label>Bing: <input type="search" name="q"></label> <input type="submit" value="Search...">
</form>
\end{lstlisting}

% subsubsection form (end)

\subsubsection{label} % (fold)
\label{ssub:label}
Label 元素用来标记表单交互元素的标签，是一个辅助说明性的元素，label元素往往对应特定的元素。

\begin{lstlisting}
<p><label>年龄: <input name=age type=number min=0></label></p>
\end{lstlisting}

% subsubsection label (end)

\subsubsection{input} % (fold)
\label{ssub:input}
Input 元素通过type属性，可生成各种交互元素，如文本框、密码框、按钮等等。
% Table generated by Excel2LaTeX from sheet 'Sheet1'
\begin{table}[htbp]
  \caption{input元素的type属性值及其意义}
    \begin{tabular}{l|ll}
    \toprule
    type     & 类型      & 返回值 \\
    \midrule
    hidden  & 隐藏文本域   & 字符串 \\
    text    & 文本框     & 单行文本 \\
    search  & 搜索框     & 单行文本 \\
    tel     & 电话号码文本框 & 单行文本 \\
    url     & URL地址框  & URL地址 \\
    email   & 邮件地址框   & 邮箱地址或多个邮箱地址 \\
    password & 密码框     & 单行文本 \\
    date    & 日期      & 无时区的日期 \\
    time    & 时间      & 无时区的时间 \\
    number  & 数字      & 数字 \\
    range   & 数字范围    & 数字 \\
    color   & 颜色选择器   & RGB颜色值 \\
    checkbox & 复选框     & 列表值 \\
    radio   & 单选按钮    & 数字值 \\
    file    & 文件选择器   & 文件信息 \\
    submit  & 提交按钮    & 预设值 \\
    image   & 图片按钮    & 预设值 \\
    reset   & 重设按钮    & n/a \\
    button  & 按钮      & n/a \\
    \bottomrule
    \end{tabular}%
  \label{tab:addlabel}%
\end{table}%

Input 元素的用法示例如下：

\begin{lstlisting}
<input type="range" name="a" list="a-values">
<datalist id="a-values">
 <option value="10" label="Low">
 <option value="90" label="High">
</datalist>
\end{lstlisting}
% subsubsection input (end)

\subsubsection{button} % (fold)
\label{ssub:button}
Button 元素生成一个按钮，可通过type属性控制按钮类型。type的值有reset、submit和button，分别对应重置按钮、提交按钮和普通按钮。
% subsubsection button (end)

\subsubsection{select} % (fold)
\label{ssub:select}
Select 元素生成一个下拉菜单控制器，菜单列表由option构成。

\begin{lstlisting}
<select name="unittype" required>
 <option value=""> Select unit type </option>
 <option value="1"> Miner </option>
 <option value="2"> Puffer </option>
 <option value="3"> Snipey </option>
 <option value="4"> Max </option>
 <option value="5"> Firebot </option>
</select>
\end{lstlisting}
% subsubsection select (end)

\subsubsection{datalist} % (fold)
\label{ssub:datalist}
Datalist 可为指定的表单元素，如文本框，生成一个数据列表，方便用户直接选择。

\begin{lstlisting}
<label>
 Sex:
 <input name=sex list=sexes>
 <datalist id=sexes>
  <option value="Female">
  <option value="Male">
 </datalist>
</label>
\end{lstlisting}

% subsubsection datalist (end)
\subsubsection{optgroup} % (fold)
\label{ssub:optgroup}
Optgroup 元素结合select元素使用，将生成列表分组。例如：

\begin{lstlisting}
<form action="courseselector.dll" method="get">
 <p>Which course would you like to watch today?
 <p><label>Course:
  <select name="c">
   <optgroup label="8.01 Physics I: Classical Mechanics">
    <option value="8.01.1">Lecture 01: Powers of Ten
    <option value="8.01.2">Lecture 02: 1D Kinematics
    <option value="8.01.3">Lecture 03: Vectors
   <optgroup label="8.02 Electricity and Magnestism">
    <option value="8.02.1">Lecture 01: What holds our world together?
    <option value="8.02.2">Lecture 02: Electric Field
    <option value="8.02.3">Lecture 03: Electric Flux
   <optgroup label="8.03 Physics III: Vibrations and Waves">
    <option value="8.03.1">Lecture 01: Periodic Phenomenon
    <option value="8.03.2">Lecture 02: Beats
    <option value="8.03.3">Lecture 03: Forced Oscillations with Damping
  </select>
 </label>
 <p><input type=submit value="Play">
</form>
\end{lstlisting}
% subsubsection optgroup (end)

\subsubsection{option} % (fold)
\label{ssub:option}
Option元素为select、optgroup、datalist元素生成列表项目。
% subsubsection option (end)

\subsubsection{textarea} % (fold)
\label{ssub:textarea}
Textarea 元素表示能输入多段文字的文本框。

\begin{lstlisting}
<p>如果您有任何意见，烦请告知我们： <textarea cols=80 name=comments></textarea></p>
\end{lstlisting}

% subsubsection textarea (end)
\subsubsection{keygen} % (fold)
\label{ssub:keygen}
Keygen 元素表示密钥生成器，当表单提交时，一个密钥将被提交到服务器。

\begin{lstlisting}
<form action="" method="post" enctype="multipart/form-data">
        <p><keygen name="key"></p>
        <p><input type=submit value="Submit key..."></p>
</form>
\end{lstlisting}

% subsubsection keygen (end)
\subsubsection{output} % (fold)
\label{ssub:output}
Output 元素表示计算结果或者用户交互的结果。

\begin{lstlisting}
<form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber">
        <input name=a type=number step=any> +
        <input name=b type=number step=any> =
        <output name=o for="a b"></output>
    </form>
\end{lstlisting}

% subsubsection output (end)
\subsubsection{progress} % (fold)
\label{ssub:progress}
Progress 元素表示进度条。

\begin{lstlisting}
<section>
        <h2>Task Progress</h2>
        <p>Progress:
            <progress id="p" max=100><span>0</span>%</progress>
        </p>
        <script>
        var progressBar = document.getElementById('p');

        function updateProgress(newValue) {
            progressBar.value = newValue;
            progressBar.getElementsByTagName('span')[0].textContent = newValue;
        }
        updateProgress(50);
        </script>
</section>
\end{lstlisting}

上述代码将生成一个进度为50\%的进度条。
% subsubsection progress (end)

\subsubsection{meter} % (fold)
\label{ssub:meter}
Meter 元素表示在一定范围内的图形化比值。

\begin{lstlisting}
<meter min=0 max=20 value=12>12cm</meter>
\end{lstlisting}
% subsubsection meter (end)

\subsubsection{filedset} % (fold)
\label{ssub:filedset}
Filedset 元素表示表单中的一组表单元素集合。

\begin{lstlisting}
<fieldset name="numfields">
  <legend> <label>
   <input type=radio checked name=clubtype onchange="form.numfields.disabled = !checked">
   My card has numbers on it
  </label> </legend>
  <div><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></div>
 </fieldset>
\end{lstlisting}
% subsubsection filedset (end)

\subsubsection{legend} % (fold)
\label{ssub:legend}
Legend 元素在fieldset元素使用，表示fieldset的标题。
% subsubsection legend (end)

\subsection{脚本元素}

脚本元素可为文档增加用户交互性。

\subsubsection{script}
元素script能为HTML文档包含动态脚本和数据块，包含在script元素中的内容不会直接显示给用户。

当使用script元素包含动态脚本时，脚本内容既可以直接嵌入在行内，也可以通过scr属性导入外部独立的脚本文件。

script元素除全局性属性之外，还拥有以下几个属性：

\begin{description}
  \item [src] 外部脚本文件的地址
  \item [type] 内嵌资源的类型。type的默认值是"text/javascript"。如果脚本语言不是JavaScript，则必须指定type的值。
  \item [charset] 外部脚本文件的字符编码方式
  \item [async] 使浏览器可以尽快地执行脚本，而不用在下载脚本时阻塞文档解析（异步）。在不支持async的浏览器中，通过动态创建<script>元素并把它插入文档中，来实现脚本的异步载入和执行。
  \item [defer] 使得浏览器延迟脚本的执行，直到文档的载入和解析完成，并可以操作。
  \item [crossorigin] 设置元素处理跨域请求的方式。
\end{description}

\subsubsection{noscript}
Noscript 元素当浏览器支持脚本时，其包含的内容不被显示；而当浏览器禁用脚本或者不支持脚本时，将会显示其内容。

\subsubsection{template}
Template 表示HTML模版片段，结合JavaScript能生成基于模版的动态内容。
\subsubsection{canvas}
Canvas 元素表示可实时生成内容的画布，结合JavaScript，可生成动画、背景、游戏场景等等图片。
